<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<%@ include file="/WEB-INF/views/include/head.jsp"%>

<link rel="stylesheet" href="${ctxStatic}/css/DateTimePicker.css">
<link rel="stylesheet" href="${ctxStatic}/css/common.css">
<link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
<script src="${ctxStatic}/DateTimePicker/DateTimePicker.js"></script>
<style>
:root, body{
    min-width:auto;
}

.searchSm {
    margin-bottom:5px;
}

.searchLeft{
    width:680px;
}

.searchRight{
    width:210px;
}
</style>
<script>

        $(function(){
            $("#dtBox1").DateTimePicker({
                  dateFormat:"yyyy-MM-dd",
                  parentElement:".timeBox",
              });
            addTitleCss();
        });
        
        //重置
        function clean(){
            // input赋值空
            $("input").val("");
            //$('#orderStatusCD').val('');
            //$("#orderStatusCD").select2(); 
            // 添加表单
            $("#searchForm").submit();
        }
        
            /*加结果集式样*/
    function addTitleCss() {
        // 结果集个数
        var resultNumber = $(".lengthId").length;
        // 如果结果集个数大于零
        if (resultNumber > 0) {
            var theadW = $('.tabScroll thead').width();
            var theadTh = $('.tabScroll thead tr th').length;
            $('.tabScroll thead tr th').width(theadW / theadTh);
            $('.tabScroll tbody tr:first-child td')
                    .each(
                            function() {
                                var indexNum = $(this).index();
                                var theadW = $('.tabScroll thead').width();
                                var theadTh = $('.tabScroll thead tr th').length;
                                $('.tabScroll thead tr th').width(theadW/theadTh);
                                $('.tabScroll tbody tr:first-child td').each(function(){
                                    var indexNum = $(this).index();
                                    var tdWidth = $('.tabScroll tbody tr:first-child td').eq(indexNum).css('width');
                                    $('.tabScroll thead tr th').eq(indexNum).width(tdWidth);
                                });
                            });
            $(this).addClass('active');
            $(this).siblings().removeClass('active');
        }else if(resultNumber == 0 ){
            var theadW = $('.tabScroll thead').width();
            var theadTh = $('.tabScroll thead tr th').length;
            $('.tabScroll thead tr th').width(theadW/theadTh);
        }
    }
        
    // 保存方法
    var saveForm = {
            s:null,
            t:null,
            save:function(s,t){
                $(t).attr("disabled",true);
                this.s=s;
                this.t=t;
                 $("#inputForm").validate({
                    submitHandler : function() {
                        var params = $("#inputForm").serialize();
                        $.post("${ctx}/order/order/updateOrderStatus", params, function(result) {
                            if (result == "false") {
                                $("#inputForm")[0].reset();
                                $(saveForm.t).attr("disabled",false);
                            } else {
                                // 状态更改成功！
                                layer.msg('<spring:message code="order_state_save_success"/>', {time:1000}); 
                                window.parent.frames[0].location.href = "${ctx}/order/order/";
                                closeWin();
                                
                            }
                        }, 'json');
                    }
                }   );
                $("#inputForm").submit(); 
        }
    }
    

    
</script>
</head>
<!--头部-->
<form id="inputForm">
<div class="myshop clearfix">
    <p class="myshoptop fl">订单状态更新</p>
    <div class="fr">
        <div class="topBtnClose" onclick="closeWin()">
            <img src="${ctxStatic}/images/btn-close.png">
        </div>
    </div>
</div>
<div class="middle myshop_middleSm">
    <div class="clearfix">
        <p class="data_id" style="width:190px;">更新日期：${fns:getDate('yyyy-MM-dd')}</p>
        <p class="data_id" style="width:150px;">更新者：${userName}</p>
        <input  name="idsStr" type="hidden" value="${idsStr}"/>
    </div>
    <div class="data tableBox tableList">
        <div class="tableSm">
            <div class="tabScroll" style="height:333px;">
            <table>
                <thead>
                <tr>
                      <!-- 标记 -->
                      <th><spring:message code="order_mark"/></th>
                      <!-- 订单号 -->
                      <th><spring:message code="order_orderNo"/></th>
                      <!-- 客户姓名 -->
                      <th><spring:message code="order_customer_name"/></th>
                      <!-- 状态 -->
                      <th><spring:message code="order_state"/></th>
                      <!-- 款式类别 -->
                      <th><spring:message code="order_style_category"/></th>
                      <!-- 试穿号码 -->
                      <th><spring:message code="order_size"/></th>
                      <!-- 面料 -->
                      <th><spring:message code="order_material"/></th>
                      <!-- 数量 -->
                      <th><spring:message code="order_number"/></th>
                      <!-- 售价 -->
                      <th><spring:message code="order_sales_price"/></th>
                      <%-- <!-- 天数 -->
                      <th><spring:message code="order_days"/></th> --%>
                      <!-- 预计交付日 -->
                      <th><spring:message code="order_estimated_delivery_date"/></th>
                      <%-- <!-- 最终交付日 -->
                      <th><spring:message code="order_final_delivery_date"/></th> --%>
                       <!-- 创建人 -->
                       <th><spring:message code="order_createUser"/></th>
                       <!-- 创建日期 -->
                       <th><spring:message code="order_createDate"/></th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${orderList}" var="item" varStatus="status">
                    <tr>
                           <!-- 标记 -->
                                <td>
                                    <c:set value="<%=ResourcesUtil.getConfig(\"Rework_90\")%>" var="rework" />
                                    <c:set value="<%=ResourcesUtil.getConfig(\"order_flag-normal_10\")%>" var="normal" />
                                    <c:set value="<%=ResourcesUtil.getConfig(\"order_flag-express_20\")%>" var="express" />
                                    <c:choose>
                                        <c:when test="${item.orderStatusCD == rework }">
                                            <img src="${ctxStatic}/images/icon-01.png" class="orderListImg">
                                         </c:when>
                                        <c:otherwise>
                                            <c:if test="${item.urgentCD == express}">
                                                <img src="${ctxStatic}/images/icon-04.png" class="orderListImg">
                                            </c:if>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                          <!-- 订单号 -->
                          <td >
                              <%-- <p data-toggle="tooltip" title="${item.orderNO}" class="show" onclick='window.location.href="${ctx}/order/createOrder/form?id=${item.id}"'>${item.orderNO}</p> --%>
                              <p data-toggle="tooltip" title="${item.orderNO}" >${item.orderNO}</p>
                          </td>
                          <!-- 客户姓名 -->
                          <td>
                              <p>${item.customerName}</p>
                          </td>
                          <!-- 状态 -->
                          <td>
                              <p>${fns:getDictName(item.orderStatusCD)}</p>
                          </td>
                          <!-- 款式类别 -->
                          <td>
                              <p>${fns:getDictName(item.styleCategoryCD)}
                              </p>
                          </td>
                          <!-- 试穿号码 -->
                          <td>
                              <p>${fns:getDictName(item.sizeCD)}</p>
                          </td>
                          <!-- 面料名称 -->
                          <td style="min-width:150px;max-width:150px">
                              <p>${item.fabricName}</p>
                          </td>
                          <!-- 数量 -->
                          <td style="min-width:48px; max-width:48px">
                              <p>${item.orderMaterialNumber}</p>
                          </td>
                          <!-- 售价 -->
                          <td>
                              <p>${item.orderDesignPrice}</p>
                          </td>
                          <%-- <!-- 天数 -->
                          <td style="min-width:50px; max-width:50px">
                              <p>${item.orderDays}</p>
                          </td> --%>
                          <!-- 预计交付日 -->
                          <td>
                              <p>
                                  <fmt:formatDate value="${item.targetDate}" pattern="yyyy-MM-dd" />
                              </p>
                          </td>
                          <%-- <!-- 最终交付日 -->
                          <td>
                              <p>
                                  <fmt:formatDate value="${item.targetDate}" pattern="yyyy-MM-dd" />
                              </p>
                          </td> --%>
                          <!-- 创建人 -->
                          <td>
                              <p>${item.createUserName}</p>
                          </td>
                          <!-- 创建日期 -->
                          <td>
                              <p>
                                  <fmt:formatDate value="${item.createDate}" pattern="yyyy-MM-dd" />
                              </p>
                          </td>
                      </tr>
                  </c:forEach>


                </tbody>
            </table>
            </div>
        </div>
    </div>
    <div class="data clearfix">
        <div class="ch fl">
            <div class="ch_middle fl">
                <!-- 更新状态 -->
                <p class="data_id">更新状态</p>
                <select  class="form-control sex"  id="orderStatusCD" name="orderStatusCD" data-rule-required="true" data-msg-required="<spring:message code="order_please_choose_order_state"/>">
                    <option value=''><spring:message code="order_please_input_state"/></option>
                    <c:forEach items="${orderStatusList}" var="item">
                        <option value="${item.itemCode}-${item.itemValue}">${item.itemNameCN}</option>
                    </c:forEach>
               </select>
            </div>
        </div>
        <div class="ch fr">
            <p class="data_id">备注</p>
            <textarea class="shopint" name="remarks" style="height:50px;" placeholder="" maxlength="100"></textarea>
        </div>
    </div>
    <div class="twobtn" >
        <div class="onebtn clearfix">
            <button class="save fl" onclick="saveForm.save(0)">更新</button>
            <button class="gon fl" onclick=" closeWin();">取消</button>
        </div>
    </div>
</div>
</form>

<div id="dtBox1"></div>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/DateTimePicker.js"></script>
<script src="js/layer.js"></script>
<script src="js/layerStyle.js"></script>

<script>
    var windowH = window.innerHeight
            ||document.documentElement.clientHeight
            ||document.body.clientHeight
    $('.middle').css('height',windowH - 40);

    $(document).ready(function() {
        $("#dtBox1").DateTimePicker(
                {
                    dateFormat: "yyyy-MM-dd",
                    parentElement: ".timeBox",
                }
        );

    });

    $('.tableList tr').on('click',function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active')
            $(this).find("input[type='checkbox']").removeAttr('checked')
        }else{
            $(this).addClass('active');
            $(this).find("input[type='checkbox']").prop('checked','checked')
        }
    })

    window.onload = function(){
        var theadW = $('.tabScroll thead').width()
        var theadTh = $('.tabScroll thead tr th').length
        $('.tabScroll thead tr th').width(theadW/theadTh)
        $('.tabScroll tbody tr:first-child td').each(function(){
            var indexNum = $(this).index()
            var tdWidth = $('.tabScroll tbody tr:first-child td').eq(indexNum).css('width')
            $('.tabScroll thead tr th').eq(indexNum).width(tdWidth);
        })

    }
</script>
</body>
</html>